<template>
  <div class="set-column" v-loading="loading">
    <div class="summary">
      <ConfigSummary
        title="A 文件"
        :tableData="tableDataA"
        :configData="configDataA"
      />
      <div class="bar" />
      <ConfigSummary
        title="B 文件"
        :tableData="tableDataB"
        :configData="configDataB"
      />
    </div>

    <div v-if="!emptyConfig" class="check-config">
      <div v-if="checkResult != null" class="check-result">
        <el-alert
          v-for="(i, index) in checkResult"
          :key="index"
          :title="i"
          type="warning"
          effect="dark"
          show-icon
          :closable="false"
        />
      </div>
      <div v-else class="start-box">
        <el-button type="primary" round @click="startCmp">开始比较</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import ConfigSummary from '@/components/ConfigSummary'
import checkConfig from '@/utils/checkConfig'
import cmpData from '@/utils/cmpData'

export default {
  name: 'SetColumn',
  components: {
    ConfigSummary,
  },
  data() {
    return {
      loading: false,
    }
  },
  computed: {
    ...mapState({
      tableDataA: state => state.tableDataA,
      tableDataB: state => state.tableDataB,
      configDataA: state => state.configDataA,
      configDataB: state => state.configDataB,
    }),
    emptyConfig() {
      if ((this.tableDataA == null) || (this.tableDataB == null)) {
        return true
      }
      if ((this.configDataA.currentSheet === '') || (this.configDataB.currentSheet === '')) {
        return true
      }
      return false
    },
    checkResult() {
      if (this.emptyConfig) {
        return null
      }
      return checkConfig(this.configDataA, this.configDataB)
    },
  },
  methods: {
    ...mapMutations({
      setResult: 'setResult',
    }),
    startCmp() {
      this.loading = true
      setTimeout(() => {
        const result = cmpData(this.tableDataA, this.tableDataB, this.configDataA, this.configDataB)
        // DEBUG
        console.log(result)

        this.setResult(result)
        this.$router.push('/cmpResult')
        setTimeout(() => {
          this.loading = false
        }, 0)
      }, 0)
    },
  },
}
</script>

<style scoped lang="scss">
.summary {
  display: flex;
  margin-bottom: 1em;
}

.config-summary {
  flex-grow: 1;
}

.bar {
  width: 0.2em;
  margin: 1em;
  background-color: grey;
  opacity: 0.5;
}

.start-box {
  display: flex;
  justify-content: center;

  .el-button {
    width: 80%;
  }
}

.check-result {
  .el-alert {
    margin-bottom: 0.5em;
  }
}
</style>
